<template>
	<div class="highlights">
		<agenda></agenda>
		<div class="highlights-wrapper">
			<div class="highlights-content">
				<image class="home-title" id="highlights" src="https://static.inclusionconf.com/static/images/highlights-title2-2025.png?t=1" alt="" mode="heightFix">

					<div class="highlights-tabs">
						<div class="highlights-tab" :class="activeIndex == index ? 'active' : ''" @click="tabFn(index)" v-for="(item, index) in tabs" :key="index">{{ $t(item.label) }}</div>
					</div>

					<template v-if="activeIndex == 0">
						<div class="nums" id="nums">
							<div class="item" v-for="(item, index) in nums" :key="index">
								<div class="top">
									<Nums v-for="(ite, ind) in item['num' + En].split('')" :value="ite" :key="index + 'a' + ind"></Nums><span class="span">{{ item['unit' + En] }}</span>
								</div>
								<div class="bottom" v-html="item['name' + En]"></div>
							</div>
						</div>
						<div class="technology2">
							<div class="item" v-for="(item, index) in oneList" :key="index" @click="showFn(item, index)">
								<div class="technology2-1" :style="{ backgroundImage: `url(${item.coverUrl})` }"></div>
								<div class="inner">
									<div class="technology2-2 ellipsis1">{{ item['title1' + En] }}</div>
									<div class="technology2-3">{{ item['title2' + En] }}</div>
								</div>
							</div>
						</div>
					</template>
					<template v-if="activeIndex == 1">
						<div class="map">
							<image class="img" src="https://static.inclusionconf.com/static/images/home-map-url.png" alt="" mode="widthFix">
						</div>
					</template>
					<template v-if="activeIndex == 2">
						<div class="activity-content">
							<div class="activity-title">
								2025 Inclusion·外滩大会科技智能创新赛(简称“外滩大会AI科创赛”)聚焦AI在生活、金融、安全领域的创新科技应用。<br>
								作为展示和鼓励创新A!技术和应用的平台，本次大赛将荣幸邀请国内外知名院校、投资者、开发者等专业人士参与评估与合作，为创新者和企业提供一个真实的演练机会与展示舞台。期待与所有参与者共同推动AI技术的创新应用和发展，携手见证AI技术的无限可能。
							</div>

							<div class="activity-content-list">
								<div class="item" @click="jumpInner(1)">
									<div class="pic pic-img">
										<image class="img" src="https://static.inclusionconf.com/static/images/activity-img1.jpg" alt="" mode="widthFix">
									</div>
									<div class="item-content">
										<div class="title">
											人工智能硬件科创大赛
										</div>
										<div class="desc">
											以AI走进生活为主题，探索AI智能硬件如何为生活带来变革以AI走进生活为主题，探索AI智能硬件如何带来进生活为主题，探索AI智能硬件如何带来…
										</div>
										<div class="arrow">
											<image class="img" src="https://static.inclusionconf.com/static/images/activity-right.png" alt="" mode="widthFix">
										</div>
									</div>
								</div>
								<div class="item" @click="linkWeb('https://tianchi.aliyun.com/specials/promotion/afac2025')" target="_blank">
									<div class="pic pic-img">
										<image class="img" src="https://static.inclusionconf.com/static/images/activity-img2.jpg" alt="" mode="widthFix">
									</div>
									<div class="item-content">
										<div class="title">
											AFAC金融智能创新大赛
										</div>
										<div class="desc">
											将从真实的业务场景和AI技术变革趋势出发，推进AI在金融领域的落地应用将从真实的业务场景和AI技术变革趋势出发，推进AI在金融领域的落地应…
										</div>
										<div class="arrow">
											<image class="img" src="https://static.inclusionconf.com/static/images/activity-right.png" alt="" mode="widthFix">
										</div>
									</div>
								</div>
								<div class="item" @click="linkWeb('https://securitylab.antgroup.com/newAiChallenge?spm=a2c22.12281976.0.0.4c2f454dwlGTn5&isRedirected=true')" target="_blank">
									<div class="pic pic-img">
										<image class="img" src="https://static.inclusionconf.com/static/images/activity-img3-t1.png" alt="" mode="widthFix">
									</div>
									<div class="item-content">
										<div class="title">
											2025·全球AI攻防挑战赛
										</div>
										<div class="desc">
											聚焦生活、金融、健康场景下数字身份AI大模型智能交互认证安全，推动安全技术进化、筑牢可信AI生态的关键力量聚焦生活、金融、健康场景下…
										</div>
										<div class="arrow">
											<image class="img" src="https://static.inclusionconf.com/static/images/activity-right.png" alt="" mode="widthFix">
										</div>
									</div>
								</div>
							</div>
						</div>
					</template>
					<template v-if="activeIndex == 3">
						<div class="activity-content">
							<div class="activity-title">
								2025 Inclusion·外滩大会定于2025年9月11日至13日举办，以“重塑创新增长”为主题本届大会上，将同步举行第三届科技人才招聘会，定档于9月13日(周六)，此次招聘会是在上海市人力资源和社会保障局指导下，由外滩大会组委会主办，上海市人力资源公共服务中心和蚂蚁集团共同承办的活动。旨在为青年人才提供就业机会，助力企业蓬勃发展。
							</div>

							<div class="activity-content-list">
								<div class="item" style="cursor: auto;">
									<div class="pic">
										<image class="img" src="https://static.inclusionconf.com/static/images/home-tab4-1.png" alt="" mode="widthFix">
									</div>
								</div>
								<div class="item" style="cursor: auto;">
									<div class="pic">
										<image class="img" src="https://static.inclusionconf.com/static/images/home-tab4-2.png" alt="" mode="widthFix">
									</div>
								</div>
								<div class="item" style="cursor: auto;">
									<div class="pic">
										<image class="img" src="https://static.inclusionconf.com/static/images/home-tab4-3.png" alt="" mode="widthFix">
									</div>
								</div>
							</div>
						</div>
					</template>
					<div class="btn" @click="moreFn">{{ $t('checkMore') }}
						<image class="img" src="https://static.inclusionconf.com/static/images/agenda-right-wap.png" alt="" mode="widthFix">
					</div>
			</div>
		</div>
		<speaker :list="speakers"></speaker>
		<!-- <cooperation @clickFn="clickFn"></cooperation> -->
		<uni-popup type="center" :visible.sync="centerDialogVisible" :width="isPc ? '800px' : '680rpx'" custom-class="pub-mask">
			<div class="highlights-mask">
				<img class="highlights-mask-1" @click="centerDialogVisible = false" src="https://static.inclusionconf.com/static/images/home-mask-close-icon.png" alt="">
				<div class="highlights-mask-content">
					<img class="highlights-mask-2" :src="maskDetail.coverUrl" alt="">
					<div class="highlights-mask-3">
						<div class="big">{{ maskDetail['name' + En] }}</div>
						<pre class="small ellipsis1">{{ maskDetail['blurb' + En] }}</pre>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
	import Nums from "./nums.vue"
	import speaker from "./speaker.vue"
	import agenda from "./agenda.vue"
	import cooperation from "./cooperation.vue"
	import protal from "@/api/protal"

	export default {
		components: {
			Nums,
			speaker,
			agenda,
			cooperation
		},
		data() {
			return {
				centerDialogVisible: false,
				maskDetail: {},
				activeIndex: 0,
				swiperOptions: null,
				nums: [],
				list: [],
				speakers: [],
				count: 0,
				timer: null,
				startSwiper: false,
				tabs: [{
						label: 'technologyTitle'
					},
					{
						label: 'greenTitle'
					},
					{
						label: 'ai'
					},
					{
						label: 'activity2-2'
					},
				],
				oneList: [],
			}
		},
		created() {
			this.technologyExhibitionList()
			const data = [{
					"num": "100",
					"numEn": "100",
					"unit": "+",
					"unitEn": "+",
					"name": "科技企业/实验室",
					"nameEn": "technological enterprises/laboratories"
				},
				{
					"num": "300",
					"numEn": "300",
					"unit": "+",
					"unitEn": "+",
					"name": "项创新成果",
					"nameEn": "innovative achievements"
				},
				{
					"num": "15",
					"numEn": "15",
					"unit": "+",
					"unitEn": "+",
					"name": "全球首发产品/技术",
					"nameEn": "globally first launched products/technologies"
				},
				{
					"num": "20",
					"numEn": "20",
					"unit": "+",
					"unitEn": "+",
					"name": "高校科研成果",
					"nameEn": "academic research achievements"
				},
				{
					"num": "15",
					"numEn": "15",
					"unit": "+",
					"unitEn": "+",
					"name": "技术获国际创新奖项",
					"nameEn": "technologies honored with international innovation awards"
				},
			]
			this.nums = data
			// const height = document.documentElement.clientHeight
			// window.addEventListener('scroll', e => {
			//     if ($('#highlights').offset()) {
			//         const numsOffsetTop = $('#highlights').offset().top
			//         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			//         if ((scrollTop + height) > numsOffsetTop) {
			//             this.nums = data
			//         }
			//     }
			//     if ($('#highlights-swiper').offset() && this.$refs.mySwiper) {
			//         const swiperOffsetTop = $('#highlights-swiper').offset().top
			//         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			//         if ((scrollTop + height) > swiperOffsetTop && !this.startSwiper) {
			//             this.startSwiper = true
			//             setTimeout(() => {
			//                 this.$refs.mySwiper.$el.swiper.startAutoplay()
			//             }, 5000)
			//         }
			//     }
			// })
			this.guestList()
			this.countPlus()
		},
		methods: {
			showFn(item, index) {
				this.maskDetail = item
				this.centerDialogVisible = true
			},
			jumpInner(id) {
				this.linkWeb('aiCompetition')
			},
			technologyExhibitionList() {
				const params = {
					"pageNum": this.pageNum,
					"pageSize": 8
				}
				protal.technologyExhibitionList(params).then(res => {
					const arr = [

						{

							"uuid": "fb78c837bada471189e7065b589e5ba6",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/f5d6836b1b3d40fdb67e371896391318.jpg",

							"name": "人工智能实验室",

							"nameEn": "AI Laboratory",

							"blurb": "展区汇聚10家大模型厂商、高校研究机构的AI前沿技术和关键科研成果，包括大模型前沿技术、行业大模型最",

							"blurbEn": "This exhibition area presents state-of-the-art AI technologies and significant research contribution",

							"title1": "从LLM到通用AI",

							"title2": "—大模型与具身智能协同进化",

							"title1En": "From LLM to AGI",

							"title2En": "– The Co-Evolution of LLM and Embodied Intelligence",

						},

						{

							"uuid": "ab51b7daa1e44fa4a412b767635ab8fa",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/e1c504f0e6f8405a92533b52dfa32542.jpg",

							"name": "数据要素流通工厂",

							"nameEn": "Circulation Factory: Data as a Factor of Production ",

							"blurb": "人工智能的大规模应用，离不开高质量的数据供给。数据决定了AI能力的上限，而数据的存储、流通和处理能力",

							"blurbEn": "High-quality data supply is crucial for the large-scale application of AI, because data determines t",

							"title1": "数据与计算",

							"title2": "—驱动AI的强基底座",

							"title1En": "Data and Computing",

							"title2En": "– A Strong Foundation Driving AI Development",

						},

						{

							"uuid": "02f15fec3e1b4860b3e30ac217a67565",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/c772ead39fda42238018a13144c575a4.jpg",

							"name": "未来助手",

							"nameEn": "Future Assistants",

							"blurb": "欢迎来到“未来助手”空间，在这里你将体验机器人和智能助理陪伴的一天，从早上起床到晚上休憩，从生活、工",

							"blurbEn": "Welcome to the Future Assistants space, where you can spend a day augmented by robots and intelligen",

							"title1": "AI安全可信",

							"title2": "—构建可控可靠的智能生态",

							"title1En": "AI Safety and Reliability",

							"title2En": "– Building a Controllable and Reliable Intelligent Ecosystem",

						},

						{

							"uuid": "c2f34557f2b34ecfafa4c171599d9796",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/4d724f1723164d9c848434ff8b5dbfd0.jpg",

							"name": "未来健康",

							"nameEn": "Future Health",

							"blurb": "在家感到不舒服该怎么办？在家运动有什么推荐？爸妈记忆力下降该怎么办？在不远的未来，每个家庭都有AI健",

							"blurbEn": "What should one do if they feel unwell at home? Are there recommended exercises for staying active a",

							"title1": "未来健康",

							"title2": "AI守护你的全生命周期",

							"title1En": "Future Health",

							"title2En": "– AI-Based Health Protection Throughout Your Life",

						},

						{

							"uuid": "a1299e542dc941a4bf871f3a5932a9e4",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/bb8b216920fb4f42b8232723064d9141.jpg",

							"name": "未来财富空间",

							"nameEn": "Future Finance",

							"blurb": "沉浸式体验专属的未来财富空间，通过语音交互的互动体验让蚂蚁AI理财专家为用户带去普惠的高质量理财服务",

							"blurbEn": "Immerse yourself in the exclusive Future Finance area, where AI financial experts from Ant Group pro",

							"title1": "未来出行",

							"title2": "—打造智能出行新全景",

							"title1En": "Future Mobility",

							"title2En": "– Creating a New Panorama of Intelligent Transportation",

						},

						{

							"uuid": "e96606acc7ef4e869fa60760fd2ebbe5",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/4c13473440244d4c8312c602606fb502.jpg",

							"name": "全球远航港",

							"nameEn": "Global Voyage Port",

							"blurb": "全球远航港，寓意万里汇助力中国商家出海远航。在展区您将看到万里汇一个账户助力中小企业全球收付，生态联",

							"blurbEn": "Discover how WorldFirst empowers merchants to expand globally in the Global Voyage Port exhibition a",

							"title1": "AI时代的支付",

							"title2": "-从支付工具到智能助手",

							"title1En": "Payment in AI Era",

							"title2En": "– From Payment Tools to Smart Assistants",

						},

						{

							"uuid": "b3b684cec7d14f869dd02c32169f8ec4",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/f96e49d80f304421ae9a1dabff749562.jpg",

							"name": "国际风情湾",

							"nameEn": "International Bay",

							"blurb": "在国际风情港，您将看到数字支付成为连接全球商业的重要桥梁。\n在多国特色街区，感受Alipay+助力全",

							"blurbEn": "At the International Bay, discover how digital payments create bridges for global businesses. In the",

							"title1": "数字新能源",

							"title2": "-重塑能源的生产与流通",

							"title1En": "Digital New Energy",

							"title2En": "– Reshaping Energy Production and Circulation",

						},

						{

							"uuid": "c4a24edaedcd4c60897862791c981b71",

							"coverUrl": "https://static.inclusionconf.com/other/2024-10-09/71eecc4b3eb1496db1daf3011e03a62d.jpg",

							"name": "宠物养老空间",

							"nameEn": "Elderly Pet Care Space",

							"blurb": "为了让老年宠物同样老有所依，得到全面照护，精心构建全方位守护体系。通过AI智能技术，实现老年宠物个性",

							"blurbEn": "Here, you will explore how a comprehensive care system is designed to provide all-around support for",

							"title1": "工农业进化区",

							"title2": "-AI释放新质生产力",

							"title1En": "Evolutionary Zone for Industry and Agriculture",

							"title2En": "– Unlocking New Quality Productive Forces with AI",

						}

					]
					const obj = {}
					arr.forEach(x => {
						obj[x.uuid] = x
					})
					this.oneList = res.data.map(x => {
						if (obj[x.uuid]) {
							x.title1 = obj[x.uuid].title1
							x.title2 = obj[x.uuid].title2
							x.title1En = obj[x.uuid].title1En
							x.title2En = obj[x.uuid].title2En
							return x
						}
					})
				})
			},
			tabFn(index) {
				this.activeIndex = index
			},
			mouseenter() {
				this.$refs.mySwiper.$el.swiper.stopAutoplay()
			},
			mouseleave() {
				this.$refs.mySwiper.$el.swiper.startAutoplay()
			},
			countPlus() {
				this.timer = setInterval(() => {
					this.count++
				}, 3000)
			},
			moreFn() {
				if (this.activeIndex == 0) {
					this.linkWeb('technology')
				}
				if (this.activeIndex == 1) {
					this.linkWeb('activityGreen')
				}
				if (this.activeIndex == 2) {
					this.linkWeb('activitySubmit')
				}
				if (this.activeIndex == 3) {
					this.linkWeb('activityExchange')
				}
			},
			clickFn() {
				this.jsAPI('waitan_homeClick', {
					floor_var: '即刻加入',
					position_var: '4',
					flowName_var: '即刻加入',
					industryFirstCate_var: '无',
					industrySecCate_var: '无',
					tabName_var: '无'
				})
				this.jsAPI('waitan_joinUsClick')
			},
			guestList() {
				protal.guestList('2024').then(res => {
					this.speakers = res.data || []
				})
			},
			link(item, index) {
				this.jsAPI('waitan_homeClick', {
					floor_var: '大会亮点',
					position_var: '3',
					flowName_var: item.title,
					industryFirstCate_var: '无',
					industrySecCate_var: '无',
					tabName_var: '卡片'
				})

				this.jsAPI('waitan_highLightsClick', {
					position_var: index + 1,
					contentId_var: '无',
					contentName_var: item.title,
				})
				// this.$router.push(item.link)
				this.linkWeb(item.link)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.highlights-mask {
		width: calc(100%);
		height: auto;
		background: #FFFFFF;
		padding: 14px 0;
		border-radius: 12px;
		position: relative;

		.highlights-mask-1 {
			position: absolute;
			left: 50%;
			top: calc(100% + 10px);
			transform: translateX(-50%);
			width: 48px;
			height: 48px;
			cursor: pointer;
		}

		.highlights-mask-content {
			width: 100%;
			height: 100%;
			overflow: auto;
			padding: 0 14px;
		}

		.highlights-mask-2 {
			width: 100%;
			height: auto;
		}

		.highlights-mask-3 {

			.big {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 14px;
				color: #181818;
				line-height: 22px;
				text-align: left;
				font-style: normal;
				margin: 14px 0 4px;
			}

			.small {
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 11px;
				color: #181818;
				line-height: 17px;
				text-align: left;
				font-style: normal;
				white-space: pre-wrap;
				-webkit-line-clamp: 13;
			}
		}
	}

	.highlights {
		width: 100%;
		// background: url(https://static.inclusionconf.com/static/images/highlights-bg-new.png);
		// background-size: 100% 100%;
		background: #19234B;
		position: relative;

		.highlights-wrapper {
			position: relative;
			z-index: 1;
			background: #784DFF;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: -34rpx;
				border-bottom: 36rpx solid #784DFF;
				border-left: 0 solid transparent;
				border-right: 60rpx solid transparent;
			}

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: -18rpx;
				border-top: 20rpx solid #784DFF;
				border-left: 0 solid transparent;
				border-right: 60rpx solid transparent;
			}
		}

		.highlights-content {
			width: 100%;
			padding: 34px 18px 44px 18px;
			box-sizing: border-box;
			margin: 0 auto;
			position: relative;
			z-index: 1;

			.highlights-tabs {
				width: calc(100% + 18px);
				overflow: auto;
				display: flex;
				margin-top: 30px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);

				&::-webkit-scrollbar {
					display: none !important;
				}

				.highlights-tab {
					white-space: nowrap;
					margin-right: 23px;
					font-family: AlibabaPuHuiTi_2_65_Medium;
					font-size: 16px;
					font-weight: normal;
					line-height: 16px;
					color: rgba(255, 255, 255, 0.5);
					padding-bottom: 15px;
					position: relative;
					cursor: pointer;

					&.active {
						color: #fff;

						&::after {
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 2px;
							border-radius: 1px;
							background-color: #fff;
						}
					}
				}
			}

			.technology2 {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					flex: 0 0 calc(50% - 5px);
					cursor: pointer;
					position: relative;

					.technology2-1 {
						width: 100%;
						padding-top: 66%;
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center center;
					}

					.inner {
						padding: 8px 0 16px;
						width: 100%;

						.technology2-2 {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 14px;
							color: #FFFFFF;
							line-height: 19px;
							text-align: left;
							font-style: normal;
							-webkit-line-clamp: 2;
						}

						.technology2-3 {
							display: none !important;
						}
					}
				}
			}

			.btn {
				width: 90px;
				height: 28px;
				background: rgba(60, 45, 170, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 11px;
				color: #FFFFFF;
				line-height: 1;
				text-align: left;
				font-style: normal;
				margin: 14px auto 0;
				cursor: pointer;

				.img {
					width: 11px;
					height: 11px;
					margin-left: 4px;
				}
			}

			.nums {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30px;
				align-items: flex-start;

				.item {
					flex: 0 0 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 24px;

					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {
						flex: 0 0 33.3%;
					}

					.top {
						font-size: 30px;
						font-family: AlibabaPuHuiTi-3-105-Heavy;
						color: #fff;
						display: flex;
						align-items: center;

						.span {
							height: 40px;
							line-height: 46px;
						}
					}

					.bottom {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 11px;
						color: #FFFFFF;
						line-height: 14px;
						text-align: center;
						font-style: normal;

						/deep/ span {
							font-size: 11px;
							font-family: AlibabaPuHuiTi_3_85_Bold;
							color: #33C3FF;
						}

						/deep/ i {
							display: inline-block;
							width: 9px;
							height: 13px;
							background: url(https://static.inclusionconf.com/static/images/smallnum5.png);
							background-size: 100% 100%;
							vertical-align: middle;
							margin: 0 2px;
							position: relative;
							top: -1px;
						}
					}
				}
			}

			.list {
				margin-top: 0;

				.item {
					width: 100%;
					height: 352rpx;
					position: relative;
					overflow: hidden;
					border: 1px solid rgba(255, 255, 255, 0.20);
					margin-bottom: 24rpx;

					img {
						width: 244rpx;
						height: 100%;
					}

					.text {
						display: none;
						position: absolute;
						left: 0;
						bottom: 0;
						padding: 14px 10px;

						.title {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 16px;
							color: #FFFFFF;
							line-height: 16px;
							text-align: left;
							font-style: normal;
						}
					}

					.text-content {
						position: absolute;
						right: 0;
						left: 244rpx;
						top: 0;
						bottom: 0;
						padding: 20px 16px;
						background: #04155C;

						.title {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 18px;
							color: #FFFFFF;
							line-height: 18px;
							text-align: left;
							font-style: normal;
							padding-bottom: 12px;
							border-bottom: 1px solid rgba(255, 255, 255, 0.4);
							margin-bottom: 10px;
						}

						.name {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 12px;
							color: #F2F5FE;
							line-height: 19px;
							text-align: justify;
							font-style: normal;
						}

						i {
							position: absolute;
							right: 16px;
							bottom: 12px;
							font-size: 16px;
							color: #fff;

							img {
								width: 16px;
							}
						}
					}
				}
			}

			.map {
				position: relative;
				margin: 25px auto 20px;

				.img {
					display: block;
					width: 100%;
					height: auto;
				}
			}

			.activity-content {
				margin: 0 auto;

				.activity-title {
					width: 100%;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 12px;
					font-weight: normal;
					line-height: 19px;
					color: #FFFFFF;
					margin: 20px 0 16px;
				}

				.activity-content-list {
					width: 100%;

					.item {
						position: relative;
						cursor: pointer;
						margin-bottom: 10px;
						display: block;

						.pic {
							width: 100%;

							.img {
								width: 100%;
								height: auto;
							}
						}
						
						.pic-img {
							width: 390rpx;
							height: 520rpx;
						}

						.item-content {
							position: absolute;
							top: 0;
							right: 0;
							height: 100%;
							width: calc(100% - 390rpx);
							color: #fff;
							z-index: 1;
							box-sizing: border-box;
							padding: 28rpx 20rpx 23rpx;
							backdrop-filter: blur(2px);
							background: rgba(30, 35, 75, 1);

							.title {
								font-family: AlibabaPuHuiTi_3_65_Medium;
								font-size: 16px;
								color: #FFFFFF;
								line-height: 23px;
							}

							.desc {
								margin-top: 8px;
								font-family: AlibabaPuHuiTi_3_45_Light;
								font-size: 11px;
								color: #FFFFFF;
								line-height: 17px;
								text-align: justify;
								font-style: normal;
							}

							.arrow {
								position: absolute;
								right: 10px;
								bottom: 14px;

								.img {
									width: 20px;
									height: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>